<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.ajax4jsf.org/rich"
	xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
	xmlns:s="http://jboss.com/products/seam/taglib">
	
	<a4j:region>
		<table width="100%">
			<s:fragment rendered="#{picker.renderFilter}">
			<tr>
				<td>
					<h:panelGrid cellpadding="4" columns="2">
						<h:outputLabel value="#{messages['EnterFilter']}"
							styleClass="rad-framework-form-label"/>
						<h:inputText id="#{id}Filter" value="#{picker.filter}"
							maxsize="20" styleClass="rad-framework-form-input-field">
							<a4j:support event="onblur" reRender="#{reRender}">
								<s:conversationId/>
							</a4j:support>
						</h:inputText>
					</h:panelGrid>
				</td>
				<td></td>
				<td></td>
			</tr>
			</s:fragment>
			<tr>
				<td valign="top" width="45%" align="center">
					<fieldset>
						<legend>#{messages['Available']}</legend>
						<h:selectManyListbox value="#{picker.toAdd}"
							style="width:100%;overflow:auto;height:150px">
							<f:selectItems value="#{picker.available}"/>
							<f:converter converterId="#{picker.converterId}"/>
						</h:selectManyListbox>
					</fieldset>
				</td>
				
				<td width="10%" align="center">
					<h:panelGrid>
						<a4j:commandLink reRender="#{reRender}"
							eventsQueue="viewQ"
							action="#{picker.add}"
							disabled="#{empty picker.available}"
							styleClass="rad-framework-button-content">
							<s:conversationId/>
							<span><h:outputText value="#{messages['AddM2M']}" /></span>
						</a4j:commandLink>
						<a4j:commandLink reRender="#{reRender}"
							eventsQueue="viewQ"
							action="#{picker.remove}"
							disabled="#{empty picker.selected}"
							styleClass="rad-framework-button-content">
							<s:conversationId/>
							<span><h:outputText value="#{messages['RemoveM2M']}" /></span>
						</a4j:commandLink>
					</h:panelGrid>
				</td>
				
				<td valign="top" width="45%" align="center">
					<fieldset>
						<legend>#{messages['Selected']}</legend>
						<h:selectManyListbox value="#{picker.toRemove}"
							style="width:100%;overflow:auto;height:150px">
							<f:selectItems value="#{picker.selected}"/>
							<f:converter converterId="#{picker.converterId}"/>
						</h:selectManyListbox>
					</fieldset>
				</td>
			</tr>
			<s:fragment rendered="#{picker.renderPaging}">
			<tr rendered="#{picker.renderPaging}">
				<td align="right">
					<h:panelGrid cellpadding="8" columns="2">
						<h:outputLabel value="#{messages['Paging']}"
							styleClass="rad-framework-form-label"/>
						<rich:inputNumberSlider 
							minValue="#{picker.pageCount > 0 ? 1 : 0}"
							maxValue="#{picker.pageCount}"
							value="#{picker.page}">
							<a4j:support event="onchange" reRender="#{reRender}">
								<s:conversationId/>
							</a4j:support>
						</rich:inputNumberSlider>
					</h:panelGrid>
				</td>
				<td></td>
				<td></td>
			</tr>
			</s:fragment>
			<tr>
				<td colspan="3">
					<hr class="rad-framework-horizontal-separator"/>
				</td>
			</tr>
		</table>
	</a4j:region>
	
</ui:composition>
